{template header_static.html}
<link href="{HOME_THEME_PATH}css/content.css" rel="stylesheet" media="screen" type="text/css">
<link href="{HOME_THEME_PATH}css/mobile.css" rel="stylesheet" media="screen" type="text/css">
<body>
    {template header.html}
    <main class="pro-main">
        <div class="crumbs">
            <?php $neiyebanner=dr_site_value('neiyebanner');?>
            <?php if ($neiyebanner) { $key=0; foreach ($neiyebanner as $v) { ?>
            {if $key==1}
            <div class="banner-img"> 
                <img src="{dr_get_file($v[2])}" width="1920" height="300" class="innerbanners"> 
            </div>
            {/if}
            <?php  $key++; } } ?> 
            <div class="banner-content">
                <div class="l-wrap">
                    <h1 class="banner-title-h1">{usu_fanyi($cat['name'], $language)}</h1>
                    <div class="banner-breadcrumbs"> 
                        <a href='/' class=''>HOME</a>
                        {dr_catpos($catid,'',true," &gt; <a href='[url]' class=''>[name]</a>")}
                    </div>
                </div>
            </div>
        </div>
    <section class="common-main">
      <div class="news">
        <div class="l-wrap">
          <div class="page-container news-wrap">
            <aside class="sidebar">
                <div class=" category mod categories">
                    <div class="sidebar-title title">
                        <p>{usu_fanyi('News', $language)}</p>
                    </div>
                    <ul class="sidebar-cate">
                        {category module=share pid=2 return=t}
                        <li class="menu-item LiLevel1 {if $t.id==$catid}active{/if}"> <a href="{if $t.child}javascript:;{else}{dr_url_rel($t.url, SITE_URL)}{/if}">{usu_fanyi($t.name, $language)}</a>
                            {if $t.child}
                            <ul class="sub-menu">
                                {category module=share pid=$t.id return=t2}
                                <li class="LiLevel2">
                                    <a href="{dr_url_rel($t2.url, SITE_URL)}">{usu_fanyi($t2.name, $language)}</a>
                                </li>
                                {/category}
                            </ul>
                            {/if}
                        </li>
                        {/category}
                    </ul>
                </div>
                <div class=" hotpro mod products">
                    <div class="sidebar-title title">
                        <p>{usu_fanyi('Last News', $language)}</p>
                    </div>
                    <div>
                        <ul class="sidebar-prolist">
                            {module module=news catid=2 num=0,5}
                            <li>
                                <div> 
                                    <a href="{dr_url_rel($t.url, SITE_URL)}" class="img lazy-wrap"> 
                                        <img src="{dr_get_file($t['thumb'])}"  width="110" height="110" alt="{usu_fanyi($t['title'], $language)}"> 
                                    </a>
                                    <div>
                                        <a href="{dr_url_rel($t.url, SITE_URL)}" class="text">
                                            <p>{usu_fanyi($t['title'], $language)}</p>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            {/module}
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="page-main wrap-r">
              <ul class="news-list list1">
                {module module=news catid=$catid page=1}
                <li> 
                    <a
                    href="{dr_url_rel($t.url, SITE_URL)}">
                    <div class="img lazy-wrap"> <img class="lazy"
                        data-src="{dr_get_file($t['thumb'])}"
                        data-sizes="295x0 768w,300x0 1024w,300x0 1280w,300x0 1366w,300x0 1440w,300x0 1600w" width="400"
                        height="300" alt="{usu_fanyi($t.title, $language)}">
                      <div class="lazy-load"></div>
                    </div>
                  </a>
                  <div class="info"> <span class="time">{dr_date($t['updatetime'],'Y-m-d')}</span> <a
                      href="{dr_url_rel($t.url, SITE_URL)}"
                      class="title">{usu_fanyi($t.title, $language)}</a>
                    <p class="text">{usu_fanyi($t.description, $language)}</p>
                    <a href="{dr_url_rel($t.url, SITE_URL)}"
                      class="more-btn" title="{usu_fanyi($t.title, $language)}">{usu_fanyi('read more', $language)} ></a>
                  </div>
                </li>
                {/module}

              </ul>
              <div class="pages">
                  {$pages}
              </div>
              <style>
                  @media(min-width:586px){
                      li{ 
                      list-style: none;
                  }
                  .pages .active{
                      border: 0px ;
                      background:#9f27c6;
                  }
                  .pages .active a{
                      color: #ffffff;
                  }
                  .pages {
                      margin: 40px 0 ; 
                  }
                  .pagination { 
                      display: flex; 
                      align-items: center;
                  }
                  .pagination li:first-child{
                      border: 0px ;
                      background:#9f27c6;
                  }
                  .pagination li:first-child a{
                      color: #ffffff;
                  }
                  .pagination li { 
                      border: 1px solid #ccc;
                      margin: 0 5px; 
                      line-height: 40px;
                  }
                  .pagination li a{ 
                  padding: 10px 15px;
                  line-height: 4px;
                  }
                  .pagination li:hover{ 
                      background:#9f27c6;
                  }
                  .pagination li a:hover{ 
                      color: #ffffff;
                  }
                  }
                  @media(max-width:586px){
                      .pagination li:first-child {  
                          display: none;  
                      }
                      li{ 
                          list-style: none;
                      }
                      .pages .active{
                          border: 0px ;
                          background:#9f27c6;
                      }
                      .pages .active a{
                          color: #ffffff;
                      }
                      .pages {
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          margin: 40px 0 ; 
                      }
                      .pagination { 
                          padding-left:0px ;
                          display: flex; 
                          justify-content: center; 
                          align-items: center;
                      }
                      .pagination li:first-child{
                          border: 0px ;
                          background:#9f27c6;
                      }
                      .pagination li:first-child a{
                          color: #ffffff;
                      }
                      .pagination li { 
                          border: 1px solid #ccc;
                          margin: 0 5px; 
                          line-height: 40px;
                      }
                      .pagination li a{ 
                      padding: 10px 15px;
                      line-height: 4px;
                      }
                      .pagination li:hover{ 
                          background:#9f27c6;
                      }
                      .pagination li a:hover{ 
                          color: #ffffff;
                      }
                  }
              </style>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  {template footer.html}
  <script language="javascript" type="text/javascript" src="{HOME_THEME_PATH}js/guestbook.js"></script>
  <link href="{HOME_THEME_PATH}css/guestbook.css" rel="stylesheet" media="screen" type="text/css">

</body>

</html>